<template>
    <div class="edu-page-warp">
        <condition-card :showResetBtn="true" @search="searchList" @reset="reset">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="学院" v-if="tutorType ==2">
                        <DictSelect
                            v-model="queryParams.faculty"
                            :data="options.faculty"
                            filterable
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入学年级" v-if="tutorType ==1">
                        <!-- <GradeSelect v-model="queryParams.grade" :showAll="false"></GradeSelect> -->
                        <el-date-picker
                            style="width:100%"
                            v-model="queryParams.grade"
                            align="right"
                            type="year"
                            value-format="yyyy"
                            placeholder="请选择"
                            :clearable="true">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业" v-if="tutorType ==2">
                        <!-- <MajorSelect :faculty="queryParams.faculty" v-model="queryParams.major"></MajorSelect> -->
                        <MyMajor
                            :faculty="queryParams.faculty"
                            :grade="queryParams.currentGrade"
                            v-model="queryParams.major"
                        ></MyMajor>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="tutorType ==1">
                    <el-form-item label="当前年级">
                        <!-- <GradeSelect v-model="queryParams.currentGrade" :showAll="false"></GradeSelect> -->
                        <el-date-picker
                            style="width:100%"
                            v-model="queryParams.currentGrade"
                            align="right"
                            type="year"
                            value-format="yyyy"
                            placeholder="请选择"
                            :clearable="true">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入学年级" v-if="tutorType ==2">
                        <!-- <GradeSelect v-model="queryParams.grade" :showAll="false"></GradeSelect> -->
                        <el-date-picker
                            style="width:100%"
                            v-model="queryParams.grade"
                            align="right"
                            type="year"
                            value-format="yyyy"
                            placeholder="请选择"
                            :clearable="true">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学堂" v-if="tutorType ==1">
                        <DictSelect
                            v-model="queryParams.schoolId"
                            :data="options.school"
                            filterable
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属类" v-if="tutorType ==1">
                        <SchoolMajorSelect
                            :schoolId="queryParams.schoolId"
                            v-model="queryParams.major"
                        ></SchoolMajorSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="tutorType ==2">
                    <el-form-item
                        label="当前年级"
                        :error="(!queryParams.currentGrade && !!queryParams.faculty) ? '请选择当前年级':''"
                    >
                        <!-- <GradeSelect v-model="queryParams.currentGrade" :showAll="false"></GradeSelect> -->
                        <el-date-picker
                            style="width:100%"
                            v-model="queryParams.currentGrade"
                            align="right"
                            type="year"
                            value-format="yyyy"
                            placeholder="请选择"
                            :clearable="true">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">学生人数统计列表</div>
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <el-button type="primary" @click="exportNumber">导出</el-button>
                </div>
            </div>
            <edu-table
                url="/api/welcomeservice/tutorStudent/count"
                ref="mainTable"
                :order="false"
                :selection="false"
            >
                <el-table-column
                    label="学院"
                    prop="facultyI18n"
                    v-if="tutorType == 2"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="专业"
                    prop="majorI18n"
                    v-if="tutorType == 2"
                    show-overflow-tooltip
                />
                <el-table-column label="入学年级" prop="grade"/>
                <el-table-column label="当前年级" prop="currentGrade"/>
                <el-table-column
                    label="学堂"
                    prop="school"
                    v-if="tutorType == 1"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="所属类"
                    prop="majorI18n"
                    v-if="tutorType == 1"
                    show-overflow-tooltip
                />
                <el-table-column label="已选学生数量" prop="chooseNum"/>
                <el-table-column label="未选学生数量" prop="unChooseNum"/>
                <el-table-column label="学生总数量" prop="sumNum"/>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import BPIs from "common/src/api/welcomeService/schoolRelation";
import SchoolMajorSelect from "./SchoolMajorSelect";
import APIs from "common/src/api/welcomeService/tutorExportImport";
import MyMajor from "./MyMajor";

// 学生人数统计
export default {
    name: "StudentNumber",
    props: ["tutorType"],
    computed: {},
    components: {
        SchoolMajorSelect,
        MyMajor
    },
    mounted() {
        this.getOptions();
    },
    watch: {
        "queryParams.currentGrade": {
            handler: function(newVal, oldVal) {
                if (this.queryParams.schoolId) {
                    this.queryParams.schoolId = null;
                }
                this.options.school = [];
                if (newVal) {
                    this.querySchool.condition.grade = newVal;
                    this.findSchool();
                }
            }
        }
    },
    data() {
        return {
            dialogTitle: "",
            options: {
                faculty: [],
                school: []
            },
            queryParams: {
                faculty: "",
                schoolId: null,
                major: "",
                grade: null,
                currentGrade: null,
                type: ""
            },
            querySchool: {
                pageNum_: 0,
                pageSize_: 0,
                condition: {}
            }
        };
    },
    methods: {
        getOptions() {
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        faculty: "X_YX"
                    },
                    res.data,
                    this.options
                );
            });
            this.searchList();
        },
        findSchool() {
            //学堂下拉
            BPIs.findSchool(this.querySchool).then(res => {
                if (res.code == 200 && res.data.list.length > 0) {
                    for (const item of res.data.list) {
                        this.options.school.push({
                            label: item.name,
                            value: item.id
                        });
                    }
                }
            });
        },
        exportNumber() {
            let loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, .48)"
            });
            this.queryParams.type = this.tutorType;
            let data = _.cloneDeep(this.queryParams);
            APIs.exportStuNumber(data).then(res => {
                if (res.code == 200) {
                    this.delayRequest(res.data.key, loading);
                } else {
                    loading.close();
                }
            });
        },
        async delayRequest(key, loading) {
            await new Promise(resolve => setTimeout(resolve, 3000));
            APIs.getReportStatus(key)
                .then(res => {
                    if (res.code == 200 && res.data.status) {
                        let path = APIs.exportLogUrl + res.data.path;
                        //window.open(path);
                        window.location.href = path;
                        loading.close();
                    } else {
                        this.delayRequest(key, loading);
                    }
                })
                .catch(ex => {
                    this.delayRequest(key, loading);
                });
        },
        reset() {
            for (const key in this.queryParams) {
                this.queryParams[key] = "";
            }
            this.searchList();
        },
        searchList() {
            this.queryParams.type = this.tutorType;
            this.$refs.mainTable.search(this.queryParams);
        }
    }
};
</script>
<style lang="scss" >
</style>
